// pages/main-music/main-music.js
import { getMusicBanner, getSongMenuList } from "../../services/music"
import recommendStore from "../../store/recommendStore";
import rankingStore from "../../store/rankingStore";
import playerStore from "../../store/playerStore";
import querySelect from "../../utils/query-select";
import { throttle } from "underscore";

const querySelectThrottle = throttle(querySelect, 100);
const app = getApp();

Page({
  data: {
    searchValue: "",
    banners: [],
    bannerHeight: 0,
    screenWidth: 375,

    recommendSongs: [],

    // 歌单数据
    hotMenuList: [],
    recMenuList: [],
    // 巅峰榜数据
    isRankingData: false,
    rankingInfos: {},

    // 当前正在播放的歌曲信息
    currentSong: {},
    isPlaying: false
  },

  onLoad() {
    this.fetchMusicBanner();
    // this.fetchRecommendSongs()
    this.fetchSongMenuList();

    // 发起action
    recommendStore.onState("recommendSongInfo", this.handleRecommendSongs);
    recommendStore.dispatch("fetchRecommendSongsAction");
    rankingStore.onState("newRanking", this.handleNewRanking);
    rankingStore.onState("originRanking", this.handleOriginRanking);
    rankingStore.onState("upRanking", this.handleUpRanking);
    rankingStore.dispatch("fetchRankingDataAction");

    playerStore.onStates(["currentSong", "isPlaying"], this.handlePlayInfos);

    // 获取屏幕的尺寸
    this.setData({ screenWidth: app.globalData.screenWidth });
  },

  // 首页轮播图
  async fetchMusicBanner() {
    const res = await getMusicBanner();
    this.setData({ banners: res.banners });
  },

  // 请求歌曲列表
  async fetchSongMenuList() {
    getSongMenuList().then((res) => {
      this.setData({ hotMenuList: res.playlists });
    });
    getSongMenuList("华语").then((res) => {
      this.setData({ recMenuList: res.playlists });
    });
  },

  // 界面的事件监听方法
  onSearchClick() {
    wx.navigateTo({ url: "/pages/detail-search/detail-search" });
  },

  // 轮播图加载
  onBannerImageLoad(event) {
    // 设置轮播图高度
    querySelectThrottle(".banner-image").then((res) => {
      this.setData({ bannerHeight: res[0].height });
    });
  },

  // 点击歌单的跳转
  onRecommendMoreClick() {
    wx.navigateTo({
      url: "/pages/detail-song/detail-song?type=recommend",
    });
  },

  // 歌曲事件处理函数
  onSongItemTap(event) {
    const index = event.currentTarget.dataset.index;
    playerStore.setState("playSongList", this.data.recommendSongs);
    playerStore.setState("playSongIndex", index);
  },

  // ====================== 播放控制 ======================
  onPlayOrPauseBtnTap() {
    playerStore.dispatch("changeMusicStatusAction");
  },

  // 跳转进入播放页
  onPlayBarAlbumTap() {
    wx.navigateTo({
      url: "/pages/music-player/music-player",
    });
  },

  // ====================== 从Store中获取数据 ======================
  handleRecommendSongs(value) {
    if (!value.tracks) return;
    this.setData({ recommendSongs: value.tracks.slice(0, 6) });
  },

  handleNewRanking(value) {
    // console.log("新歌榜:", value);
    if (!value.name) return;
    this.setData({ isRankingData: true });
    const newRankingInfos = { ...this.data.rankingInfos, newRanking: value };
    this.setData({ rankingInfos: newRankingInfos });
  },
  handleOriginRanking(value) {
    // console.log("原创榜:", value);
    if (!value.name) return;
    this.setData({ isRankingData: true });
    const newRankingInfos = { ...this.data.rankingInfos, originRanking: value };
    this.setData({ rankingInfos: newRankingInfos });
  },
  handleUpRanking(value) {
    // console.log("飙升榜:", value);
    if (!value.name) return;
    this.setData({ isRankingData: true });
    const newRankingInfos = { ...this.data.rankingInfos, upRanking: value };
    this.setData({ rankingInfos: newRankingInfos });
  },

  handlePlayInfos({ currentSong, isPlaying }) {
    if (currentSong) {
      this.setData({ currentSong });
    }
    if (isPlaying !== undefined) {
      this.setData({ isPlaying });
    }
  },

  onUnload() {
    recommendStore.offState("recommendSongs", this.handleRecommendSongs);
    rankingStore.offState("newRanking", this.handleNewRanking);
    rankingStore.offState("originRanking", this.handleOriginRanking);
    rankingStore.offState("upRanking", this.handleUpRanking);

    playerStore.offStates(["currentSong", "isPlaying"], this.handlePlayInfos);
  },
})